<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background-color: yellowgreen;
		}
		#checkbox{
			display: none;
		}
		.label{
			width: 58px;
			height: 28px;
			line-height: 28px;
			border-radius: 20px;
			display: inline-block;
			position: relative;
			overflow: hidden;
			background-color: #f1f1f1;
			display: -webkit-box;
  			display: -ms-flexbox;
			display: flex;
			text-align: right;
			padding: 0 4px;
			box-sizing: border-box;
			font-size: 12px;
			margin: 50px auto 0;
			color: #999;
			display: block;
		}
		.label>span{
			-webkit-transition: all .5s;
			transition: all .5s;
		}
		.label:before{
			content: "";
			width: 26px;
			height: 26px;
			position: absolute;
			left: 1px;
			top: 1px;
			border-radius: 50%;
			background-color: #fff;
			-webkit-transition: all .5s;
			transition: all .5s;
		}
		#checkbox:checked + label{
			background-color: #74c742;
			text-align: left;
			color: #fff;
		}
		#checkbox:checked + label:before{
			left: 30px;
		}
	</style>
</head>
<body>
	<input type="checkbox" id="checkbox">
	<label for="checkbox" class="label">
		<span>私聊</span>
	</label>
</body>
</html>